<template>
  <basic-container>
    <avue-crud :option="option" v-model:search="search" v-model:page="page" v-model="form" :table-loading="loading"
      :data="data" :before-open="beforeOpen" ref="crud" @search-change="searchChange" @search-reset="searchReset"
      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @on-load="onLoad">
      <template #isPass="{ row }">
        <el-tag v-if="row.isPass == 0" type="danger">
          不及格
        </el-tag>
        <el-tag v-else type="success">
          及格
        </el-tag>
      </template>
      <template #status="{ row }">
        <div v-if="row.status == 1">待办理</div>
      </template>
      <template #hasChild="{ row }">
        <el-link type="primary" @click="readExam(row.examPaperId, true)">阅卷</el-link>
      </template>
      <template #status-search="{ disabled, size }">
        <el-select v-model="search.status" placeholder="状态" style="width: 240px" clearable>
          <el-option key="1" label="待办理" value="1" />
          <el-option key="0" label="已办理" value="0" />
        </el-select>
      </template>
      <template #isPass-search="{ disabled, size }">
        <el-select v-model="search.isPass" placeholder="是否及格" style="width: 240px" clearable>
          <el-option key="0" label="不及格" value="0" />
          <el-option key="1" label="及格" value="1" />
        </el-select>
      </template>
    </avue-crud>
    <exam-dialog ref="examDialogRef" :detail="examDetail" :next-exam-id="nextExamId" @readExam="readExam"></exam-dialog>
  </basic-container>
</template>

<script>
import { getExamDetail, getList } from '@/api/position/positionAssessResult';

import option from './option';
import ExamDialog from './com/examDialog.vue';

export default {
  components: { ExamDialog },
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option,
      search: {},
      loading: false,
      data: [],
      form: {},
      examDetail: {},
      nextExamId: '',
      searchInfo:{
        status:null
      }
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      console.log(this.search);
      
      const res = await getList(this.page.currentPage, this.page.pageSize, this.search);
      this.data = res.data.data.records;
      this.page.total = res.data.data.total;
      this.loading = false;
      // console.log(this.data);
    },
    beforeOpen(done, type) {
      if (['edit'].includes(type)) {

      }
      done();
    },
    searchChange(form, done) {
      this.getList();
      done();
    },
    searchReset() {
    },
    selectionChange() {
    },
    currentChange() {
    },
    sizeChange() {
    },
    refreshChange() {
    },
    onLoad() {
      this.getList();
    },
    /**
     * 阅卷
     */
    readExam(examPaperId, open) {
      let idx = this.data.findIndex(x => x.examPaperId == examPaperId)
      if (idx < this.data.length - 1) {
        this.nextExamId = this.data[idx + 1].examPaperId
      }
      // //获取试卷详情
      getExamDetail(examPaperId).then(res => {
        this.examDetail = res.data.data;
        open && this.$refs.examDialogRef.open()
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.q-cxt {
  display: flex;

  .q-c {
    width: 200px;
  }

  .q-list {
    flex: 1
  }

  .q-option {
    width: 200px;
  }
}
</style>
